

<template>
    <div>

        <van-nav-bar title="账号与安全" left-arrow @click-left="onClickLeft" />
        <div class="top-view">
            <img class="app-logo" src="https://img1.baidu.com/it/u=2605666904,1430073496&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500">
            <i style="margin-top: 1rem; margin-bottom: 20px;">重要提醒</i>
        </div>

        <p>
            注销钱请认真阅读以下重要提醒，账号注销后，您将无法使用该账号，包括：
        </p>
        
        <div class="box-container">
            <p>
                1.您将无法登陆，使用账号，并移除该账号下所有登录方式
            </p>
            <p>
                2.您将无法继续在网站的交易售后等流程
            </p>
            <p>
                3.您所有交易记录将被清空，请确保所有教育已完结
            </p>
        </div>
        
        <div class="bottom-view">
            <i style="margin-bottom: 1rem; font-size: 10px;">点击下方“确认注销，即表示您阅读并确认”</i>
            <van-button class="btn" type="danger" @click="$router.push('/')">确认注销</van-button>
        </div>

    </div>
</template>

<script setup>


//返回
const onClickLeft = () => history.back();

const cancelClick = () => { 

}

</script>

<style lang="scss" scoped>

.top-view {
    display: flex;
    //容器内元元素水平布局
    // justify-content: center;
    //容器内部所有元素的对齐方式
    align-items: center;
    //容器内元素的文本对齐方式
    text-align: center;
    //容器内元素的排列方向(默认横向排列)
    flex-direction: column;
    margin-top: 30px;
    width: 100%;
    .app-logo {
        width: 30%;
        height: 30%;
        block-size: 100% 100%;
        background: no-repeat;
    }
}

p {
    margin-left: 2rem;
    margin-right: 2rem;
    font-size: 13px;
}

.box-container {
    margin-top: 20px;
    color: #666666; /* 修改成你想要的文本颜色 */
}


.bottom-view {
    display: flex;
    position: fixed;//固定定位
    bottom: 0px;
    text-align: center;
    //容器内部所有元素的对齐方式
    align-items: center;
    //容器内元素的排列方向(默认横向排列)
    flex-direction: column;
    height: 100px;
    overflow: hidden;
    .btn {
        // width: 100%;
        width: 100vw;
    }
}

</style>